<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="配置组" @ok="handleSubmit" width="650px" destroyOnClose showFooter>
    <BasicForm @register="registerForm"/>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import {ref, unref} from 'vue';
import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
import {BasicForm, useForm} from '/@/components/Form/index';
import {saveOrUpdate} from './configGroup.api';
import {configGroupFormSchema} from './configGroup.data';
import {useMessage} from '/@/hooks/web/useMessage';

const { createMessage } = useMessage();
  //表单配置
  const [registerForm, {setProps, resetFields, setFieldsValue, validate, updateSchema}] = useForm({
    labelWidth: 80,
    labelCol: {
      md: { span: 4 },
      sm: { span: 6 },
    },
    wrapperCol: {
      md: { span: 20 },
      sm: { span: 18 },
    },
    schemas: configGroupFormSchema,
    showActionButtonGroup: false,
  });
  // 声明Emits
  const emit = defineEmits(['success', 'register']);

  const isUpdate = ref(true);
  const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
    resetFields()
    isUpdate.value = !!data?.isUpdate;

    if (unref(isUpdate)) {
      //表单赋值
      await setFieldsValue({
        ...data.record,
      });
    }
  });

  /**
   * 提交
   */
  async function handleSubmit() {
    try {
      let values = await validate();
      console.log("from", values);
      await saveOrUpdate(values, unref(isUpdate));
      closeDrawer()
      //刷新列表
      emit('success');
      createMessage.success("操作成功")
    } finally {
      
    }
  }
</script>
